<script setup lang="tsx">
import {ref} from 'vue';
import {useBoolean, useLoading} from '@sa/hooks';
import {useAppStore} from '@/store/modules/app';
import {$t} from '@/locales';
import RoleOperateDrawer from "./role-operate-drawer.vue";
import {NButton, NPopconfirm} from 'naive-ui';
import {fetchDeleteRole, fetchGetRoleList} from "@/service/api/roles";


defineOptions({name: 'RoleList'})
const appStore = useAppStore();
const {bool: drawerVisible, setTrue: openDrawer} = useBoolean();
const {loading, startLoading, endLoading} = useLoading();
const columns = ref<any[]>([
  {
    type: 'selection',
    align: 'center',
    width: 48
  },
  {
    key: 'name',
    title: $t('page.manage.role.roleName'),
    align: 'center',
    minWidth: 120
  },
  {
    key: 'code',
    title: $t('page.manage.role.roleCode'),
    align: 'center',
    minWidth: 120
  },
  {
    key: 'desc',
    title: '备注',
    align: 'center',
    minWidth: 120
  },
  {
    key: 'operate',
    title: $t('common.operate'),
    align: 'center',
    width: 130,
    render: row => (
      <div class="flex-center gap-8px">
        <NButton type="primary" ghost size="small" onClick={() => handleEdit(row.id)}>
          {$t('common.edit')}
        </NButton>
        <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
          {{
            default: () => $t('common.confirmDelete'),
            trigger: () => (
              <NButton type="error" ghost size="small">
                {$t('common.delete')}
              </NButton>
            )
          }}
        </NPopconfirm>
      </div>
    )
  }
]);
const data = ref([]);
const pagination = ref<Api.Common.Pageable>(
  {
    pageSize: 15,
    pageNumber: 1,
    searchProperty: null,
    searchValue: null,
    orderProperty: null,
    orderDirection: null,
    filters: null
  }
);

async function getData() {
  startLoading();
  const res = await fetchGetRoleList(pagination.value);
  res.data?.content.forEach(item => {
    item.index = (pagination.value.pageNumber - 1) * pagination.value.pageSize + item.index + 1;
  });
  data.value = res.data?.content || [];
  endLoading();
}

const operateType = ref<Api.Common.OperateType>('add');

function handleAdd() {
  operateType.value = 'add';
  openDrawer();
}

const checkedRowKeys = ref<string[]>([]);

async function handleBatchDelete() {
  window.$message?.success($t('common.deleteSuccess'));
  checkedRowKeys.value = [];
  await getData();
}

const editingData = ref<Api.Entity.Role | null>(null);

function handleEdit(id: number) {
  operateType.value = 'edit';
  editingData.value = data.value.find(item => item.id === id) || null;
  openDrawer();
}

async function handleDelete(id: number) {
  const {error, data} = await fetchDeleteRole([id]);
  if (!error) {
    window.$message?.success($t('common.deleteSuccess'));
    await getData();
  }
}

getData()
</script>

<template>
  <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
    <!--    <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData"/>-->
    <NCard title="" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
      <template #header-extra>
        <TableHeaderOperation
          :disabled-delete="checkedRowKeys.length === 0"
          :loading="loading"
          @add="handleAdd"
          @delete="handleBatchDelete"
          @refresh="getData"
        />
      </template>
      <NDataTable
        v-model:checked-row-keys="checkedRowKeys"
        :bordered="false"
        :single-line="false"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="640"
        :loading="loading"
        :pagination="pagination"
        :row-key="item => item.id"
        class="sm:h-full"
      />
      <RoleOperateDrawer
        v-model:visible="drawerVisible"
        :operate-type="operateType"
        :row-data="editingData"
        @submitted="getData"
      />
    </NCard>
  </div>
</template>

<style scoped>
:deep(.n-card__content) {
  padding: 0 !important;
}

.flex-vertical-stretch {
  height: calc(100vh - 135px);
}

</style>
